<template>
    <div class="map">
        <baidu-map class="map" :center="site" :zoom="15">
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
                anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
            <bm-marker :position="site"
                :icon="{ url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: { width: 300, height: 157 } }"></bm-marker>
        </baidu-map>
    </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue';
let props = defineProps({
    site: {
        type: Object,
    }
})

// 要渲染的地址经纬度
let site = ref({ lng: 116.404, lat: 39.915 })

// 或使用 watch 监听
// 当异步请求过来数据传到这里的时候就给指定数据赋值
watch(
    () => props.site,
    (newVal) => {
        if (newVal) {
            site.value.lng = newVal[0]
            site.value.lat = newVal[1]
        }
    },
    { immediate: true }
);
</script>

<style scoped lang="scss">
.map {
    width: 100%;
    height: 100%;
    padding: 15px 15px 15px 0;
}
</style>